<template>
  <div class="bg">
    <div class="close">
      <slot name="close"></slot>
    </div>
    <div class="title">
      <slot name="title"></slot>
    </div>
    <div class="one" v-on:click="show_one">
    </div>
    <div class="two" v-on:click="show_two">
    </div>
    <div class="three" v-on:click="show_three">
    </div>
    <div class="four" v-on:click="show_four">
    </div>
    <div class="five" v-on:click="show_five">
    </div>
    <div class="content1">
      <slot name="title1"></slot>
      <div class="content01" v-show="one">

        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/949572/course_icon_1.png">
          </div>
          <div class="content-title">
            <slot name="content_title1_1"></slot>
          </div>
        </div>
        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/949572/course_icon_2.png">
          </div>
          <div class="content-title">
            <slot name="content_title1_2"></slot>
          </div>
        </div>
        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/949572/course_icon_3.png">
          </div>
          <div class="content-title">
            <slot name="content_title1_3"></slot>
          </div>
        </div>
        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/949572/course_icon_4.png">
          </div>
          <div class="content-title">
            <slot name="content_title1_4"></slot>
          </div>
        </div>
        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/949572/course_icon_5.png">
          </div>
          <div class="content-title">
            <slot name="content_title1_5"></slot>
          </div>
        </div>

      </div>
    </div>
    <div class="content2">
      <slot name="title2"></slot>
      <div class="content02" v-show="two">

        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/0089b3/course_icon_1.png">
          </div>
          <div class="content-title">
            <slot name="content_title2_1"></slot>
          </div>
        </div>
        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/0089b3/course_icon_2.png">
          </div>
          <div class="content-title">
            <slot name="content_title2_2"></slot>
          </div>
        </div>
        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/0089b3/course_icon_3.png">
          </div>
          <div class="content-title">
            <slot name="content_title2_3"></slot>
          </div>
        </div>
        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/0089b3/course_icon_4.png">
          </div>
          <div class="content-title">
            <slot name="content_title2_4"></slot>
          </div>
        </div>
        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/0089b3/course_icon_5.png">
          </div>
          <div class="content-title">
            <slot name="content_title2_5"></slot>
          </div>
        </div>

      </div>
    </div>
    <div class="content3">
      <slot name="title3"></slot>
      <div class="content03" v-show="three">

        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/a56e23/course_icon_1.png">
          </div>
          <div class="content-title">
            <slot name="content_title3_1"></slot>
          </div>
        </div>
        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/a56e23/course_icon_2.png">
          </div>
          <div class="content-title">
            <slot name="content_title3_2"></slot>
          </div>
        </div>
        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/a56e23/course_icon_3.png">
          </div>
          <div class="content-title">
            <slot name="content_title3_3"></slot>
          </div>
        </div>
        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/a56e23/course_icon_4.png">
          </div>
          <div class="content-title">
            <slot name="content_title3_4"></slot>
          </div>
        </div>
        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/a56e23/course_icon_5.png">
          </div>
          <div class="content-title">
            <slot name="content_title3_5"></slot>
          </div>
        </div>

      </div>
    </div>
    <div class="content4">
      <slot name="title4"></slot>
      <div class="content04" v-show="four">

        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/468e37/course_icon_1.png">
          </div>
          <div class="content-title">
            <slot name="content_title4_1"></slot>
          </div>
        </div>
        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/468e37/course_icon_2.png">
          </div>
          <div class="content-title">
            <slot name="content_title4_2"></slot>
          </div>
        </div>
        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/468e37/course_icon_3.png">
          </div>
          <div class="content-title">
            <slot name="content_title4_3"></slot>
          </div>
        </div>
        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/468e37/course_icon_4.png">
          </div>
          <div class="content-title">
            <slot name="content_title4_4"></slot>
          </div>
        </div>
        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/468e37/course_icon_5.png">
          </div>
          <div class="content-title">
            <slot name="content_title4_5"></slot>
          </div>
        </div>

      </div>
    </div>
    <div class="content5">
      <slot name="title5"></slot>
      <div class="content05" v-show="five">

        <div class="subject">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/696d6d/course_icon_6.png">
          </div>
          <div class="content-title">
            <slot name="content_title5_1"></slot>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      one: false,
      two: false,
      three: false,
      four: false,
      five: false
    }
  },
  mounted () {
    var links = document.querySelectorAll('a')
    Array.prototype.forEach.call(links, function (links) {
      links.addEventListener('click', function (evt) {
        evt.preventDefault()
        console.log(this)
        console.log(this.href)
        if (this.href.slice(0, 16) === 'http://127.0.0.1') {
          console.log(this.href)
          const BrowserWindow = require('electron').remote.BrowserWindow
          BrowserWindow.showDevTools = false
          let win = new BrowserWindow({
            width: 1280,
            height: 720,
            webPreferences: {
              nodeIntegration: false
            },
            show: false,
            backgroundColor: '#2e2c29'
          })
          win.setFullScreen(true)
          win.loadURL(this.href)
          win.once('ready-to-show', () => {
            win.show()
          })
        } else {
          console.log('======')
          window.location.href = this.href
        }
      })
    })
  },
  methods: {
    show_one: function () {
      this.one = true
      this.two = false
      this.three = false
      this.four = false
      this.five = false
    },
    show_two: function () {
      this.one = false
      this.two = true
      this.three = false
      this.four = false
      this.five = false
    },
    show_three: function () {
      this.one = false
      this.two = false
      this.three = true
      this.four = false
      this.five = false
    },
    show_four: function () {
      this.one = false
      this.two = false
      this.three = false
      this.four = true
      this.five = false
    },
    show_five: function () {
      this.one = false
      this.two = false
      this.three = false
      this.four = false
      this.five = true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bg{
  background:url(../../../assets/meishu/1.0/2-assets/bg.png);
  background-size:100%;
  height:720px;
  width:1280px;
  position: relative;
  margin:0 auto;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
.btn_go{
  height:100%;
  width:100%;
  opacity: 0;
  cursor:pointer;
}
a{
  height:100%;
  width:100%;
  text-decoration: none;
}
.close{
  background:url(../../../assets/meishu/1.0/2-assets/close.png) no-repeat;
  background-size:100%;
  position: absolute;
  width:50px;
  height:50px;
  right:35px;
  top:30px;
}
.title{
  width:255px;
  height:50px;
  position: absolute;
  top:20px;
  left:40%;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 5px;
  color:rgb(156, 136, 137);
}
.one{
  background:url(../../../assets/meishu/1.0/2-assets/1.png) no-repeat;
  background-size:100%;
  position: absolute;
  width:60px;
  height:100px;
  bottom:140px;
  left:205px;
  cursor: pointer;
}
.two{
  background:url(../../../assets/meishu/1.0/2-assets/2.png) no-repeat;
  background-size:100%;
  position: absolute;
  width:60px;
  height:90px;
  bottom:80px;
  left:413px;
  cursor: pointer;
}
.three{
  background:url(../../../assets/meishu/1.0/2-assets/3.png) no-repeat;
  background-size:100%;
  position: absolute;
  width:60px;
  height:90px;
  bottom:20px;
  left:605px;
  cursor: pointer;
}
.four{
  background:url(../../../assets/meishu/1.0/2-assets/4.png) no-repeat;
  background-size:100%;
  position: absolute;
  width:60px;
  height:90px;
  bottom:130px;
  right:440px;
  cursor: pointer;
}
.five{
  background:url(../../../assets/meishu/1.0/2-assets/baohe.png) no-repeat;
  background-size:70%;
  position: absolute;
  width:40px;
  height:90px;
  bottom:60px;
  right:235px;
  cursor: pointer;
}
.content1,.content2,.content3,.content4,.content5{
  position: absolute;
  height:255px;
  top:90px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
}
.content1{
  width:190px;
  left:250px;
  color:rgb(154,155,122);
}
.content2{
  width:180px;
  left:450px;
  color:rgb(37, 131, 176);
}
.content3{
  width:170px;
  left:640px;
  color:rgb(171, 114, 36);
}
.content4{
  width:170px;
  left:820px;
  color:rgb(107,162,97);
}
.content5{
  width:170px;
  left:1020px;
  color:rgb(147, 152,152);
}
.content01,.content02,.content03,.content04,.content05,{ 
  width:170px;
  height:220px;
  margin-top:10px; 
  font-size: 20px; 
  font-weight: 600;
}
.subject{
  width:170px;
  height:35px;
}
.img{
  height:35px;
  width:35px;
  float:left;
}
.img-item{
  height:100%;
  width:100%;
}
.content-title{
  width:130px;
  height:30px;
  font-size: 20px;
  float:right;
  margin-top:5px;
}
.content1 a{
  color:rgb(154,155,122);
}
.content2 a{
  color:rgb(37, 131, 176);
}
.content3 a{
  color:rgb(171, 114, 36);
}
.content4 a{
  color:rgb(107,162,97);
}
.content5 a{
  color:rgb(147, 152,152);
}
</style>
